import React, { PureComponent as Component } from 'react';
// import { formatTime } from '../../../../common.js';
// import { Link } from 'react-router-dom';
import { getEnv } from '../../../../reducer/modules/dubboProject';
// import { setBreadcrumb } from '../../../../reducer/modules/user';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ProjectEnvContent from './ProjectEnvContent';
import { Table, Popconfirm, message, Button, Modal } from 'antd';
import axios from 'axios';
// const Search = Input.Search;
const limit = 20;

@connect(
    state => {
        return {
            curUserRole: state.user.role
        };
    },
    {
        // setBreadcrumb
        getEnv
    }
)
class ProjectEnvList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // data: [],
            total: null,
            current: 1,
            backups: [],
            isSearch: false,
            visible: false
        };
    }
    static propTypes = {
        // setBreadcrumb: PropTypes.func,
        data: PropTypes.array,
        projectId: PropTypes.number
        // curUserRole: PropTypes.string
    };

    showAddMemberModal = () => {
        this.setState({
            visible: true
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false
        });
    };

    handleOk = () => {
        this.setState({
            visible: true
        });
    };

    // handleSubmit = data => {
    //     const { email, userName, cname, cellphone, rtxno } = data;
    //     const param = {
    //         email,
    //         username: userName,
    //         cname,
    //         cellphone,
    //         rtxno
    //     };
    //     axios.post('/api/user/reg', param).then(res => {
    //             if (res.data.errcode === 0) {
    //                 this.setState({
    //                     visible: false
    //                 });
    //                 this.getUserList();
    //                 message.success('成员添加成功');
    //             } else {
    //                 message.error(res.data.errmsg);
    //             }
    //         },
    //         err => {
    //             message.error(err.message);
    //         });
    // };
    //
    handleSubmits = data => {
        const param = data;
        axios.post('/api/user/add', param).then(res => {
                if (res.data.errcode === 0) {
                    this.setState({
                        visible: false
                    });
                    this.getUserList();
                    message.success('批量添加成功');
                } else {
                    message.error(res.data.errmsg);
                }
            },
            err => {
                message.error(err.message);
            });
    };
    //
    // changePage = current => {
    //     this.setState(
    //         {
    //             current: current
    //         },
    //         this.getUserList
    //     );
    // };
    //
    // getUserList() {
    //     axios.get('/api/user/list?page=' + this.state.current + '&limit=' + limit).then(res => {
    //         let result = res.data;
    //
    //         if (result.errcode === 0) {
    //             let list = result.data.list;
    //             let total = result.data.count;
    //             list.map((item, index) => {
    //                 item.key = index;
    //                 item.up_time = formatTime(item.up_time);
    //             });
    //             this.setState({
    //                 data: list,
    //                 total: total,
    //                 backups: list
    //             });
    //         }
    //     });
    // }

    componentDidMount() {
        // this.getUserList();
    }

    confirm = uid => {
        axios
            .post('/api/user/del', {
                id: uid
            })
            .then(
                res => {
                    if (res.data.errcode === 0) {
                        message.success('已删除此用户');
                        this.getUserList();
                    } else {
                        message.error(res.data.errmsg);
                    }
                },
                err => {
                    message.error(err.message);
                }
            );
    };

    async componentWillMount() {
        // this.props.setBreadcrumb([{ name: '用户管理' }]);
    }

    render() {
        let data = this.props.data;
        let columns = [
            {
                title: '环境名称',
                dataIndex: 'cname',
                key: 'cname'
            },
            {
                title: '环境地址',
                dataIndex: 'dubbourl',
                key: 'dubbourl'
            },
            {
                title: '功能',
                key: 'action',
                width: '90px',
                render: item => {
                    return (
                      <span>
                        <Popconfirm
                                title="确认删除此用户?"
                                onConfirm={() => {
                                    this.confirm(item._id);
                                }}
                                okText="确定"
                                cancelText="取消"
                            >
                          <a style={{ display: 'block', textAlign: 'center' }} href="#">
                              删除
                          </a>
                        </Popconfirm>
                      </span>
                    );
                }
            }
        ];

        // columns = columns.filter(item => {
        //     if (item.key === 'action' && role !== 'admin') {
        //         return false;
        //     }
        //     return true;
        // });

        const pageConfig = {
            total: this.state.total,
            pageSize: limit,
            current: this.state.current,
            onChange: this.changePage
        };

        const defaultPageConfig = {
            total: this.props.data.length,
            pageSize: limit,
            current: 1
        };

        return (
          <section className="user-table">
            <div className="user-search-wrapper"  style={{ marginBottom:'10px', textAlign:"right" }}>
              <Button type="primary" onClick={this.showAddMemberModal}>
                    添加
              </Button>
            </div>
            <Table
                    // rowSelection={rowSelection}
                    rowKey={record => record._id}
                    bordered={true}
                    columns={columns}
                    pagination={this.state.isSearch ? defaultPageConfig : pageConfig}
                    dataSource={data}
                />
            <div className="g-row">
              <div className="m-panel">
                {this.state.visible ? (
                  <Modal
                    title="添加成员"
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    footer={null}
                   >
                    <ProjectEnvContent
                        onCancel={this.handleCancel}
                        onSubmit={this.handleSubmit}
                        onSubmits={this.handleSubmits}
                     />
                  </Modal>
                        ) : (
                            ''
                        )}
              </div>
            </div>
          </section>
        );
    }
}

export default ProjectEnvList;
